<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/box.css" />
		<link rel="stylesheet" type="text/css" href="js/layer/theme/default/layer.css"/>
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/layer/layer.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div class="big">
			<div class="top-bar">
				<div class="left-bar">
					<input type="text" name="" id="" value="" placeholder="请输入关键字" />
					<button class="select-btn">搜索</button>

					<div class="selectDiv">
						<p>全部</p>
						<ul>
							<li class="active">全部</li>
							<li>level1</li>
							<li>level2</li>
							<li>level3</li>
							<li>level4</li>
						</ul>
					</div>
				</div>

				<div class="right-bar">
					<button>导出选中项</button>
					<button>删除选中项</button>
				</div>

			</div>

			<div class="table-box">
				<table class="tab1" border="0" cellspacing="0" cellpadding="0">
					<tr>
						<th class=""><input type="checkbox" name="" id="checkbox1" value="" /></th>
						<th>名称</th>
						<th>年龄</th>
						<th>成绩</th>
						<th>操作</th>
					</tr>

					<tr>
						<td class="checkbox-box"><input type="checkbox" name="" id="" value="" /></td>
						<td>李雷</td>
						<td>18</td>
						<td>100</td>
						<td>
							<a href="#" class="a-info">修改</a><span id=""></span>
							<a href="#" class="a-danger">删除</a>
						</td>
					</tr>
					<tr>
						<td class="checkbox-box"><input type="checkbox" name="" id="" value="" /></td>
						<td>李雷</td>
						<td>18</td>
						<td>100</td>
						<td>
							<a href="#" class="a-info">修改</a><span id=""></span>
							<a href="#" class="a-danger">删除</a>
						</td>
					</tr>
					<tr>
						<td class="checkbox-box"><input type="checkbox" name="" id="" value="" /></td>
						<td>李雷</td>
						<td>18</td>
						<td>100</td>
						<td>
							<a href="#" class="a-info">修改</a><span id=""></span>
							<a href="#" class="a-danger">删除</a>
						</td>
					</tr>
					<tr>
						<td class="checkbox-box"><input type="checkbox" name="" id="" value="" /></td>
						<td>李雷</td>
						<td>18</td>
						<td>100</td>
						<td>
							<a href="#" class="a-info">修改</a><span id=""></span>
							<a href="#" class="a-danger">删除</a>
						</td>
					</tr>
					<tr>
						<td class="checkbox-box"><input type="checkbox" name="" id="" value="" /></td>
						<td>李雷</td>
						<td>18</td>
						<td>100</td>
						<td>
							<a href="#" class="a-info">修改</a><span id=""></span>
							<a href="#" class="a-danger">删除</a>
						</td>
					</tr>
					<tr>
						<td class="checkbox-box"><input type="checkbox" name="" id="" value="" /></td>
						<td>李雷</td>
						<td>18</td>
						<td>100</td>
						<td>
							<a href="#" class="a-info">修改</a><span id=""></span>
							<a href="#" class="a-danger">删除</a>
						</td>
					</tr>
					<tr>
						<td class="checkbox-box"><input type="checkbox" name="" id="" value="" /></td>
						<td>李雷</td>
						<td>18</td>
						<td>100</td>
						<td>
							<a href="#" class="a-info">修改</a><span id=""></span>
							<a href="#" class="a-danger">删除</a>
						</td>
					</tr>
					<tr>
						<td class="checkbox-box"><input type="checkbox" name="" id="" value="" /></td>
						<td>李雷</td>
						<td>18</td>
						<td>100</td>
						<td>
							<a href="#" class="a-info">修改</a><span id=""></span>
							<a href="#" class="a-danger">删除</a>
						</td>
					</tr>
					<tr>
						<td class="checkbox-box"><input type="checkbox" name="" id="" value="" /></td>
						<td>李雷</td>
						<td>18</td>
						<td>100</td>
						<td>
							<a href="#" class="a-info">修改</a><span id=""></span>
							<a href="#" class="a-danger">删除</a>
						</td>
					</tr>
					<tr>
						<td class="checkbox-box"><input type="checkbox" name="" id="" value="" /></td>
						<td>李雷</td>
						<td>18</td>
						<td>100</td>
						<td>
							<a href="#" class="a-info">修改</a><span id=""></span>
							<a href="#" class="a-danger">删除</a>
						</td>
					</tr>
					<tr>
						<td class="checkbox-box"><input type="checkbox" name="" id="" value="" /></td>
						<td>李雷</td>
						<td>18</td>
						<td>100</td>
						<td>
							<a href="#" class="a-info">修改</a><span id=""></span>
							<a href="#" class="a-danger">删除</a>
						</td>
					</tr>
					<tr>
						<td class="checkbox-box"><input type="checkbox" name="" id="" value="" /></td>
						<td>李雷</td>
						<td>18</td>
						<td>100</td>
						<td>
							<a href="#" class="a-info">修改</a><span id=""></span>
							<a href="#" class="a-danger">删除</a>
						</td>
					</tr>
					<tr>
						<td class="checkbox-box"><input type="checkbox" name="" id="" value="" /></td>
						<td>李雷</td>
						<td>18</td>
						<td>100</td>
						<td>
							<a href="#" class="a-info">修改</a><span id=""></span>
							<a href="#" class="a-danger">删除</a>
						</td>
					</tr>
					<tr>
						<td class="checkbox-box"><input type="checkbox" name="" id="" value="" /></td>
						<td>李雷</td>
						<td>18</td>
						<td>100</td>
						<td>
							<a href="#" class="a-info">修改</a><span id=""></span>
							<a href="#" class="a-danger">删除</a>
						</td>
					</tr>
					<tr>
						<td class="checkbox-box"><input type="checkbox" name="" id="" value="" /></td>
						<td>李雷</td>
						<td>18</td>
						<td>100</td>
						<td>
							<a href="#" class="a-info">修改</a><span id=""></span>
							<a href="#" class="a-danger">删除</a>
						</td>
					</tr>
					<tr>
						<td class="checkbox-box"><input type="checkbox" name="" id="" value="" /></td>
						<td>李雷</td>
						<td>18</td>
						<td>100</td>
						<td>
							<a href="#" class="a-info">修改</a><span id=""></span>
							<a href="#" class="a-danger">删除</a>
						</td>
					</tr>
					<tr>
						<td class="checkbox-box"><input type="checkbox" name="" id="" value="" /></td>
						<td>李雷</td>
						<td>18</td>
						<td>100</td>
						<td>
							<a href="#" class="a-info">修改</a><span id=""></span>
							<a href="#" class="a-danger">删除</a>
						</td>
					</tr>
					<tr>
						<td class="checkbox-box"><input type="checkbox" name="" id="" value="" /></td>
						<td>李雷</td>
						<td>18</td>
						<td>100</td>
						<td>
							<a href="#" class="a-info">修改</a><span id=""></span>
							<a href="#" class="a-danger">删除</a>
						</td>
					</tr>
					<tr>
						<td class="checkbox-box"><input type="checkbox" name="" id="" value="" /></td>
						<td>李雷</td>
						<td>18</td>
						<td>100</td>
						<td>
							<a href="#" class="a-info">修改</a><span id=""></span>
							<a href="#" class="a-danger">删除</a>
						</td>
					</tr>
					<tr>
						<td class="checkbox-box"><input type="checkbox" name="" id="" value="" /></td>
						<td>李雷</td>
						<td>18</td>
						<td>100</td>
						<td>
							<a href="#" class="a-info">修改</a><span id=""></span>
							<a href="#" class="a-danger">删除</a>
						</td>
					</tr>
					<tr>
						<td class="checkbox-box"><input type="checkbox" name="" id="" value="" /></td>
						<td>李雷</td>
						<td>18</td>
						<td>100</td>
						<td>
							<a href="#" class="a-info">修改</a><span id=""></span>
							<a href="#" class="a-danger">删除</a>
						</td>
					</tr>
					<tr>
						<td class="checkbox-box"><input type="checkbox" name="" id="" value="" /></td>
						<td>李雷</td>
						<td>18</td>
						<td>100</td>
						<td>
							<a href="#" class="a-info">修改</a><span id=""></span>
							<a href="#" class="a-danger">删除</a>
						</td>
					</tr>
					<tr>
						<td class="checkbox-box"><input type="checkbox" name="" id="" value="" /></td>
						<td>李雷</td>
						<td>18</td>
						<td>100</td>
						<td>
							<a href="#" class="a-info">修改</a><span id=""></span>
							<a href="#" class="a-danger">删除</a>
						</td>
					</tr>
					<tr>
						<td class="checkbox-box"><input type="checkbox" name="" id="" value="" /></td>
						<td>李雷</td>
						<td>18</td>
						<td>100</td>
						<td>
							<a href="#" class="a-info">修改</a><span id=""></span>
							<a href="#" class="a-danger">删除</a>
						</td>
					</tr>
					<tr>
						<td class="checkbox-box"><input type="checkbox" name="" id="" value="" /></td>
						<td>李雷</td>
						<td>18</td>
						<td>100</td>
						<td>
							<a href="#" class="a-info">修改</a><span id=""></span>
							<a href="#" class="a-danger">删除</a>
						</td>
					</tr>
					<tr>
						<td class="checkbox-box"><input type="checkbox" name="" id="" value="" /></td>
						<td>李雷</td>
						<td>18</td>
						<td>100</td>
						<td>
							<a href="#" class="a-info">修改</a><span id=""></span>
							<a href="#" class="a-danger">删除</a>
						</td>
					</tr>
					<tr>
						<td class="checkbox-box"><input type="checkbox" name="" id="" value="" /></td>
						<td>李雷</td>
						<td>18</td>
						<td>100</td>
						<td>
							<a href="#" class="a-info">修改</a><span id=""></span>
							<a href="#" class="a-danger">删除</a>
						</td>
					</tr>
					<tr>
						<td class="checkbox-box"><input type="checkbox" name="" id="" value="" /></td>
						<td>李雷</td>
						<td>18</td>
						<td>100</td>
						<td>
							<a href="#" class="a-info">修改</a><span id=""></span>
							<a href="#" class="a-danger">删除</a>
						</td>
					</tr>
					<tr>
						<td class="checkbox-box"><input type="checkbox" name="" id="" value="" /></td>
						<td>李雷</td>
						<td>18</td>
						<td>100</td>
						<td>
							<a href="#" class="a-info">修改</a><span id=""></span>
							<a href="#" class="a-danger">删除</a>
						</td>
					</tr>
					<tr>
						<td class="checkbox-box"><input type="checkbox" name="" id="" value="" /></td>
						<td>李雷</td>
						<td>18</td>
						<td>100</td>
						<td>
							<a href="#" class="a-info">修改</a><span id=""></span>
							<a href="#" class="a-danger">删除</a>
						</td>
					</tr>
					<tr>
						<td class="checkbox-box"><input type="checkbox" name="" id="" value="" /></td>
						<td>李雷</td>
						<td>18</td>
						<td>100</td>
						<td>
							<a href="#" class="a-info">修改</a><span id=""></span>
							<a href="#" class="a-danger">删除</a>
						</td>
					</tr>
					<tr>
						<td class="checkbox-box"><input type="checkbox" name="" id="" value="" /></td>
						<td>李雷</td>
						<td>18</td>
						<td>100</td>
						<td>
							<a href="#" class="a-info">修改</a><span id=""></span>
							<a href="#" class="a-danger">删除</a>
						</td>
					</tr>
					<tr>
						<td class="checkbox-box"><input type="checkbox" name="" id="" value="" /></td>
						<td>李雷</td>
						<td>18</td>
						<td>100</td>
						<td>
							<a href="#" class="a-info">修改</a><span id=""></span>
							<a href="#" class="a-danger">删除</a>
						</td>
					</tr>

				</table>
			</div>

			<div class="bottom-bar">
				<button class="">上一页</button>
				<ul>
					<li class="active">
						<a href="">1</a>
					</li>
					<li>
						<a href="">2</a>
					</li>
					<li>
						<a href="">3</a>
					</li>
					<li>
						<a href="">4</a>
					</li>
					<li>
						<a href="">5</a>
					</li>
				</ul>
				<button class="">下一页</button>

				<p>到第</p>
				<input type="text" name="" id="" value="1" class="pagenum" />
				<p>页</p>
				<button>确定</button>

				<div class="right-bar">

					<p>共<span>188</span>页</p>
					<p>共<span>1000</span>条</p>
					<select name="">
						<option value="">10条/页</option>
					</select>
				</div>
			</div>

		</div>

		<script type="text/javascript">
			var index = layer.load(2, {shade: false}); //0代表加载的风格，支持0-2
			
			setTimeout(function(){
				layer.close(index);
				$('.big').css('opacity','1');
				
			},1000)
			window.onload = function() {
				var selectLength = $('.checkbox-box input').length;

				var flag = false;

				$('#checkbox1').on('click', function() {
					flag = !flag;
					$("input[type='checkbox']").prop("checked", flag);
				})

				$('.checkbox-box input').on('click', function(e) {
					e.preventDefault();
				});

				$('.a-info').on('click', function() {
					//ifream框
					layer.open({
						type: 2,
						title: '修改',
						shadeClose: true, //点击遮罩关闭层
						area: ['800px', '520px'],
//						scrollbar:false,//取消滚动条
						content: ['box2.html','no']
					});
				})

				$('.a-danger').on('click', function() {
					//询问框
					layer.confirm('确定要删除吗？', {
						btn: ['确认', '取消'] //按钮
					}, function() {
						layer.msg('删除成功！', {
							icon: 1
						});
					}, function() {
						//						layer.msg('也可以这样', {
						//							time: 000, //20s后自动关闭
						//							btn: ['明白了', '知道了']
						//						});
					});
				})

				$('.checkbox-box').on('mousedown', function(e) {
					var startX = e.screenX;
					var startY = e.screenY;
					var endX;
					var endY;
					var selectIndex = $(this).parent().index() - 1;
					var resultY;
					var selectCount;
					console.log(selectIndex);
					console.log('x:' + e.screenX + 'y:' + e.screenY);
					console.log('x:' + e.offsetX + 'y:' + e.offsetY);
					document.onmouseup = function(e) {
						console.log('x:' + e.screenX + 'y:' + e.screenY);
						endX = e.screenX;
						endY = e.screenY;
						resultY = endY - startY;
						//						console.log((endX-startX)+' '+(endY-startY));
						selectCount = parseInt(resultY / 35) + 1;
						console.log('count' + selectCount);

						for(var i = 0; i < selectCount; i++) {
							var btnState = $('.checkbox-box input:eq(' + (selectIndex + i) + ')').prop("checked");
							$('.checkbox-box input:eq(' + (selectIndex + i) + ')').prop("checked", !btnState);
						}
						checkAll();

						document.onmousedown = null;
						document.onmouseup = null;
					}

				});

				var selectValue;
				$('.selectDiv').on('click', function() {
					event.stopPropagation();
					$('.selectDiv').addClass('active');
					
					
				});
				$(document).on('click', function(){
					event.stopPropagation();
					$('.selectDiv').removeClass('active');
				});
				$('.selectDiv li').on('click', function() {
					event.stopPropagation();
					selectValue = $(this).index();
					selectValue = $(this).text();
					$('.selectDiv p').text(selectValue);
					$('.selectDiv').removeClass('active');
					

				});

				function checkAll() { //是否全选
					if(selectLength == $('.checkbox-box input:checked').length) {
						flag = true;
						$('#checkbox1').prop("checked", true);

					} else {
						flag = false;
						$('#checkbox1').prop("checked", false);
					}
					console.log($('#checkbox1').prop("checked"));
				}

			}
		</script>
	</body>

</html>